<template>
    <div>
        <h1>编辑</h1>
        <table class="table">
            <tbody>
                <tr>
                    <td>id</td>
                    <td>
                        {{ data.id }}
                        <input type="text" disabled v-model="data.id">
                    </td>
                </tr>
                <tr>
                    <td>name</td>
                    <td>
                        <input type="text" v-model="data.name">
                    </td>
                </tr>
                <tr>
                    <td>password</td>
                    <td>
                        <input type="password" v-model="data.password">
                    </td>
                </tr>
                <tr>
                    <td>isDelete</td>
                    <td>
                        <input type="checkbox" v-model="data.isDelete">
                    </td>
                </tr>
                <tr>
                    <td>img</td>
                    <td>
                        <input type="file" @change="upload">
                        <img :src="'https://localhost:7035'+data.img" style="height: 100px;width: 100px;;">
                    </td>
                </tr>
                <tr>
                    <td>memberLevelId</td>
                    <td>
                        <select v-model="data.memberLevelId">
                            <option value="0">选择会员等级</option>
                            <option v-for="d in getselectiddata" :value="d.id">{{d.name}}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                      <input type="button" value="更新" class="btn btn-success" @click="saveinfo">
                    </td>
                </tr>
            </tbody>

        </table>
        <a href="/">返回</a>
    </div>
</template>

<script setup lang="ts">

import axios from 'axios';
import { ref,onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';

const route = useRoute()
const router = useRouter()
const data=ref({
  "id": 0,
  "name": "string",
  "password": "string",
  "isDelete": false,
  "img": "string",
  "memberLevelId": 0
})



//上传
const upload=(e)=>{
    //取文件  封装包  文件保存到包
    var f = e.target.files[0];
    var fd = new FormData();
    fd.append('file',f);



    //验证要小于1MB
    if(f.size >  1 * 1024 *1024 ){
        alert("图片要小于1MB")
        return;
    }


    //取出可以有类型
    debugger

    // "image/jpeg" 
    // 'image/png'
    // 'image/gif'

    if(f.type != 'image/jpeg' &&  f.type != 'image/png'  &&  f.type != 'image/gif'  ){
        alert('格式只能为JPEG、PNG、GIF')
        return;
    }

    axios.post("https://localhost:7035/api/UpLoad",fd).then(res=>{
        data.value.img = res.data
    })
}

onMounted(()=>{
    getselectid() //读取下拉框数据
    getdata() //根据会员编号读取一个会员
})

const getselectiddata=ref([{
    "id": 0,
    "name": ""
  }])

//读取下拉框数据
const getselectid=()=>{
    axios.get("https://localhost:7035/api/MemberLevel/GetMembers").then(res=>{
        getselectiddata.value=res.data;
    })
}

//根据会员编号读取一个会员
const getdata=()=>{
    //取地址栏会员编号
    var vid = route.query.id
    axios.get("https://localhost:7035/api/Member/GetMember",{params:{id:vid}}).then(res=>{
        data.value = res.data;
    })
}

//更新
const saveinfo=()=>{
    axios.put("https://localhost:7035/api/Member/UpdateMember",data.value).then(res=>{
        if(res.data>0){
            alert('更新成功')
            router.push({path:'/'})
        }
        else
        {alert('更新失败了。。')}
    })
}

</script>

<style scoped>

</style>